<template>
  <!-- 学习排行 -->
  <div class="container">
    <div class="top">
      <div class="item">
        <img class="img" src="../assets/img/news.png" alt="">
        <span class="extra">NO.2</span>
        <span class="name">{{second.realname||"暂无"}}</span>
        <span class="score">{{second.learnTotal||"0"}}</span>
      </div>
      <div class="first">
        <div class="item">
          <img class="img" src="../assets/img/news.png" alt="">
          <span class="extra">NO.1</span>
          <span class="name">{{first.realname||"暂无"}}</span>
          <span class="score">{{first.learnTotal||"0"}}</span>
        </div>
        <div class="title">学习量排行</div>
      </div>
      <div class="item">
        <img class="img" src="../assets/img/news.png" alt="">
        <span class="extra">NO.3</span>
        <span class="name">{{third.realname||"暂无"}}</span>
        <span class="score">{{third.learnTotal||"0"}}</span>
      </div>
    </div>
    <div class="list">
      <div v-for="(item,index) in others" :key="item.id" class="item">
        <div class="left">
          <span class="index">{{index+4}}</span>
          <div class="info">
            <img class="img" src="../assets/img/news.png" alt="">
            <div class="text">
              <div class="name">{{item.realname}}</div>
              <div class="extra">体验支部</div>
            </div>
          </div>
        </div>
        <div class="right">{{item.learnTotal}}</div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data () {
    return {
      first: {},
      second: {},
      third: {},
      others: []
    }
  },
  created () {
    this.getRanking()
  },
  methods: {
    getRanking () {
      this.$axios.get('/xbkj-dj/web/edu/learn/range').then(res => {
        let [first, second, third, ...others] = res.data
        first && (this.first = first)
        second && (this.second = second)
        third && (this.third = third)
        this.others = others
      })
    }
  }
}
</script>
<style lang="less" scoped>
.container {
  padding: 20px;
}
.list {
  background-color: #fff;
  padding: 10px 0;
  border-bottom-left-radius: 6px;
  border-bottom-right-radius: 6px;
  .item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 20px;
    .right {
      font-size: 17px;
      color: #ee4532;
      line-height: 1;
      font-weight: bold;
    }
    .left {
      flex: 1;
      display: flex;
      align-items: center;
      .index {
        font-weight: bold;
        margin-right: 20px;
      }
      .info {
        display: flex;
        align-items: center;
        .img {
          display: inline-block;
          width: 50px;
          height: 50px;
          border-radius: 50%;
          margin-right: 10px;
        }
        .text {
          > div {
            line-height: 25px;
          }
          .name {
            font-weight: bold;
          }
          .extra {
            font-size: 12px;
            color: #999;
          }
        }
      }
    }
  }
}

.top {
  display: flex;
  justify-content: space-between;
  background-color: #fff;
  margin-top: 40px;
  padding: 10px 0;
  position: relative;
  border-bottom: 1px solid #eee;
  border-top-left-radius: 6px;
  border-top-right-radius: 6px;
  .first {
    position: absolute;
    top: -40px;
    left: 0;
    right: 0;
    width: 36%;
    margin: auto;
    .title {
      text-align: center;
      color: #fcc202;
      font-size: 16px;
      font-weight: bold;
      margin-top: 6px;
    }
    .item {
      width: 100%;
      background-color: #fff;
      box-shadow: 0px 0px 5px #ccc;
      border-radius: 6px;
      padding: 10px 0;
      .img {
        width: 56px;
        height: 56px;
      }
      .extra {
        background-color: #ee4532;
        padding: 4px 6px;
      }
    }
  }
  .item {
    flex: 0 0 30%;
    width: 30%;
    display: flex;
    flex-direction: column;
    align-items: center;
    .img {
      width: 50px;
      height: 50px;
      border-radius: 50%;
    }
    .extra {
      background-color: #c9c9c9;
      border-radius: 4px;
      color: #fff;
      line-height: 1;
      padding: 4px;
      font-size: 12px;
      margin-top: -2px;
    }
    .name {
      font-weight: bold;
      line-height: 1;
      padding: 8px 0;
    }
    .score {
      font-size: 17px;
      color: #ee4532;
      line-height: 1;
      font-weight: bold;
    }
  }
}
</style>
